<template>
	<view class="listParking-container">
		<view class="title">
			{{title}}
		</view>
		<view class="searchBar">
			<view class="searchInput">
				<text class="iconfont icon-icon-test12"></text>
				<input type="text" v-model="packingVo.parkingNum" @input="searchInput" placeholder="搜索车位编号"/>
				<view class="clear">
					<text class="iconfont icon-icon-test44" v-if="showClear" @click="clearInput()"></text>
				</view>
			</view>
			<view class="searchButton" @click="search()">
				<view>
					搜索
				</view>
			</view>
		</view>
		<view class="tableTitle">
			<view class="parkingNum">
				编号
			</view>
			<view class="parkingType">
				类型
			</view>
			<view class="parkingInfo">
				操作
			</view>
		</view>
		<scroll-view
			scroll-y="true" 
			class="scroll-Y"
			:style="{height:cssheight}"
			lower-threshold="50"
			@scrolltolower="scrollToLower">
			<view class="parkingItem" v-for="(item,index) in list" :key="item.id">
				<view class="parkingNum">
					{{item.parkingNum}}
				</view>
				<view class="parkingType">
					{{item.parkingType}}
				</view>
				<view class="parkingInfo" @click="goToInfoPacking(item.id)">
						详情
				</view>
			</view>
		</scroll-view>	
		<fui-dialog 
		:show="dialog.show" 
		:title="dialog.title"
		:buttons="dialog.buttons" 
		:maskClosable="false" 
		class="fui-dialog"
		@click="onTap">
			<view class="infoPacking" v-if="!noOwner">
				<view class="infoItem">
					<view class="">
						<text class="iconfont icon-icon-test35"></text>
						<text>房主姓名：</text>
						<text>{{packing.parkingOwnerName}}</text> 
					</view>
					<view class="">
						<text class="iconfont icon-icon-test24"></text>
						<text>联系电话：</text>
						<text user-select selectable="">{{packing.parkingOwnerPhone}}</text>
					</view>
				</view>
			</view>
			<view class="infoPacking" v-if="noOwner">
				<view class="infoItem">
					当前车位属于物业，请联系物业购买。
				</view>
			</view>
		</fui-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageType: null,
				cssheight: '',
				title: '可购买车库',
				packingVo: {
					parkingNum: ''
				},
				current: 1,
				limit: 8,
				list: [],
				total: 0,
				pages: 0,
				showClear: false,
				type: 1,
				packing:{
					
				},
				dialog: {
					flag: 1,
					show: false,
					title: '车位所有者信息',
					content: '',
					buttons: [
						{
							text: '关闭',
							color: '#0041da'
						}
					],
					submitted: false
				},
				noOwner: false
			};
		},
		onReady() {
			var _this = this
			var css = ''
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.scroll-Y').boundingClientRect()
					query.exec(function(res){
						_this.height = resu.windowHeight -res[0].top + 'px'
						// console.log(_this.height)
						css = _this.height
					})
				}
			})
			this.cssheight = css
		},
		onLoad(opt) {
			// console.log(opt.type)
			this.type = opt.type
			if(opt.type == 1){
				this.title = '可购买车位'
			}
			if(opt.type == 0){
				this.title = '可租用车位'
			}
			this.getPageList();
		},
		methods:{
			onTap(){
				this.dialog.show = false
			},
			//搜索
			search(){
				this.list = []
				this.getPageList()
			},
			//滚动向下加载
			scrollToLower(){
				this.getPageList(this.current += 1)
			},
			//获得分页数据
			getPageList(page = 1){
				this.current = page
				this.$myReq({
					// url: `/owner/packing/PurchaseRentalParksingList/${this.current}/10/${this.type}`,
					url: `/owner/packing/PurchaseRentalParksingList/${this.current}/13/${this.type}`,
					method: 'post',
					data: this.packingVo
				})
				.then((res) => {
					// console.log(res)
					this.list = [...this.list,...res.data.records]
					this.total = res.data.total
					this.pages = res.data.pages
					this.current = res.data.current
					if(res.data.records.length < 8){
						this.noDataShow = true
					}
				})
				.catch((err) => {
					console.log(err)
				})
			},
			goToInfoPacking(packingId){
				// /owner/packing/getPackingById/{id}
				// console.log(packingId)
				this.$myReq({
					url: `/owner/packing/getPackingById/${packingId}`
				})
				.then((res) => {
					// console.log(res)
					this.packing = res.data
					this.dialog.show = true
					if(res.data.parkingOwnerSignkey == null || res.data.parkingOwnerSignkey == ''){
						this.noOwner = true
					}
				})
			},
			clearInput(){
				this.packingVo.parkingNum = ''
				this.showClear = false
				this.list = []
				this.getPageList()
			},
			searchInput(){
				this.showClear = true
			}
		}
	}
</script>

<style lang="scss">
	.title{
		text-align: center;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
	}
	.searchBar{
		padding: 10rpx 30rpx 20rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.searchInput{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			height: 70rpx;
			width: 500rpx;
			// border: 1px solid red;
			align-items: center;
			background-color: #f6f6f6;
			border-radius: 35rpx;
			text{
				// border: 1px solid red;
				text-align: center;
				width: 70rpx;
				height: 70rpx;
				font-size: 40rpx;
				line-height: 70rpx;
			}
			input{
				// border: 1px solid red;
				width: 360rpx;
				font-size: 30rpx;
			}
			.clear{
				// border: 1px solid blue;
				width: 60rpx;
			}
		}
		.searchButton{
			width: 150rpx;
			display: flex;
			align-items: center;
			view{
				text-align: center;
				width: 150rpx;
				margin: 0 auto;
				font-size: 30rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #FFFFFF;
				border-radius: 35rpx;
				background-color: $main-colorC;
			}
		}
		view{
			// border: 1px solid red;
		}
	}
	.tableTitle{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0rpx 30rpx 10rpx 30rpx;
		width: 690rpx;
		height: 80rpx;
		align-items: center;
		// border: 1px solid red;
		border-bottom: 4rpx solid $main-garyA;
		view{
			// border: 1px solid blue;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
		}
		.parkingNum{
			width: 220rpx;
		}
		.parkingType{
			width: 220rpx;
		}
		.parkingInfo{
			width: 220rpx;
		}
	}
	scroll-view{
		// border: 1px solid red;
		// background-color: #f6f6f6;
		.parkingItem:nth-child(odd){
		}
		.parkingItem:nth-child(even){
			background-color: $main-garyA;
		}
		.parkingItem{
			padding: 10rpx 30rpx 10rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			width: 690rpx;
			height: 80rpx;
			align-items: center;
			view{
				// border: 1px solid blue;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
			}
			.parkingNum{
				width: 220rpx;
			}
			.parkingType{
				width: 220rpx;
			}
			.parkingInfo{
				width: 220rpx;
				color: $main-colorC;
			}
		}
	}	
	.fui-dialog{
		// border: 1px solid red;
		.infoPacking{
			// border: 1px solid red;
			
			.infoItem{
				// border: 1px solid red;
				width: 430rpx;
				margin: 0 auto;
				view:nth-child(1){
					margin-bottom: 20rpx;
				}
				view{
					text-align: left;
					text:nth-child(1){
						margin-right: 10rpx;
					}
					text:nth-child(2){
						width: 170rpx;
						display: inline-block;
						// border: 1px solid blue;
					}
					text:nth-child(3){
						// width: 180rpx;
						// display: inline-block;
						// border: 1px solid blue;
					}
				}
			}
		}
	}
</style>
